<template>
  <div class="uncan-my-schedule">
    <h3 class="my-schedule-title">
      我的分会场日程（{{list.length}}）
    </h3>
    <div class="schedule-timline">
      <div class="schedule-timline-item" v-for="item in list" :key="item.branchmeetingId">
        <div class="schedule-timline-item-header">
          <span class="schedule-timline-item-date">
            {{formatDate(item.startTime)}}
          </span>
          <span class="schedule-timline-item-title">
            {{item.address}}
          </span>
          <span class="schedule-timline-item-title-divider" />
          <span class="schedule-timline-item-title">
            {{item.meetingName}}
          </span>
        </div>
        <div class="schedule-timline-item-content">
          <div class="schedule-timline-item-line" />
          <div class="schedule-timline-item-time">
            {{formatTime(item.startTime, item.endTime)}}
          </div>
          <div class="schedule-timline-item-message">
            <div class="content-desc">
              <pre>{{item.vnote}}</pre>
            </div>
            <div class="content-author">
              <span>{{item.author}}</span>
              <span>{{item.major}}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import services from "../../api/mine";
import { addZero } from "../../utils";

export default {
  props: {
    list: {
      type: Array,
      default: []
    }
  },
  methods: {
    formatDate(time) {
      const date = new Date(time);
      return `${date.getMonth() + 1}.${date.getDate()}`;
    },
    formatTime(startTime, endTime) {
      const start = new Date(startTime);
      const end = new Date(endTime);

      return `${start.getHours()}:${addZero(
        start.getMinutes()
      )} - ${end.getHours()}:${addZero(end.getMinutes())}`;
    }
  }
};
</script>

<style lang="less">
.uncan-my-schedule {
  text-align: left;
  color: #fff;
  .my-schedule-title {
    margin-bottom: 40px;
    font-size: 32px;
  }
}

.schedule-timline {
  .schedule-timline-item {
    margin-top: 16px;
    &:first-child {
      margin-top: 0;
    }
  }
  .schedule-timline-item-header {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 32px;
  }
  .schedule-timline-item-date {
    font-size: 30px;
    color: #0ce4a2;
    margin-right: 22px;
  }

  .schedule-timline-item-title {
    font-size: 30px;
  }
  .schedule-timline-item-title-divider {
    height: 36px;
    border-right: 1px solid #595959;
    margin: 0 16px;
  }
  .schedule-timline-item-content {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    position: relative;
    min-height: 160px;
  }

  .schedule-timline-item-line {
    position: absolute;
    left: 12px;
    top: 0;
    bottom: 0;
    border-left: 1px solid #0ce4a2;
    &::before {
      content: "";
      width: 9px;
      height: 9px;
      background-color: #0ce4a2;
      border-radius: 100%;
      position: absolute;
      top: 0;
      left: -6px;
    }
  }

  .schedule-timline-item:last-child .schedule-timline-item-line::after {
    content: "";
    width: 9px;
    height: 9px;
    background-color: #0ce4a2;
    border-radius: 100%;
    position: absolute;
    bottom: 0;
    left: -6px;
  }

  .schedule-timline-item-time {
    padding-left: 83px;
    padding-right: 64px;
    font-size: 22px;
    white-space: nowrap;
  }
  .schedule-timline-item-message {
    align-self: flex-start;
    flex: 1;
    padding-top: 10px;
    .content-desc {
      font-size: 28px;
    }
    .content-author {
      font-size: 22px;
      color: fade(#eee, 60%);
      letter-spacing: 0;
      margin-top: 10px;
      > span:first-child {
        margin-right: 32px;
      }
    }
  }
}
</style>
